<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>菜鸟教程(runoob.com)</title>
    <style type="text/css">
      #div1 {
        width: 350px;
        height: 70px;
        padding: 10px;
        border: 1px solid #aaaaaa;
      }
    </style>
    <script>
      function allowDrop(ev) {
        ev.preventDefault()
      }

      function drag(ev) {
        ev.dataTransfer.setData('Text', ev.target.id)
      }

      function drop(ev) {
        ev.preventDefault()
        var data = ev.dataTransfer.getData('Text')
        ev.target.appendChild(document.getElementById(data))
      }
    </script>
  </head>
  <body>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br />
    <img
      loading="lazy"
      id="drag1"
      src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQXHqORt3hkDKZU5kvyszwNUSQZdd0LGzmHAA&usqp=CAU"
      draggable="true"
      ondragstart="drag(event)"
      width="336"
      height="69"
    />
  </body>
</html>
